import React from "react";
import { Badge, TabBar } from "antd-mobile";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
function Tabs() {
  const tiao = useNavigate();
  const tabs = [
    {
      key: "/home",
      title: "首页",
      icon: <AppOutline />,
      badge: Badge.dot,
    },

    {
      key: "/list",
      title: "待办",
      icon: <UnorderedListOutline />,
      badge: "5",
    },
    {
      key: "/shiping",
      title: "视频页面",
      icon: <UnorderedListOutline />,
      badge: "5",
    },
    {
      key: "/chat",
      title: "消息",
      icon: (active) => (active ? <MessageFill /> : <MessageOutline />),
      badge: "99+",
    },
    {
      key: "/my",
      title: "我的",
      icon: <UserOutline />,
    },
  ];
  const change = (key) => {
    //     console.log(key);
    tiao(key);
  };
  return (
    <div>
      <TabBar
        onChange={change}
        style={{
          position: "fixed",
          left: "0",
          bottom: "0",
          width: "100vw",
          backgroundColor: "#fff",
        }}
      >
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}

export default Tabs;
